<template>
    <orh-table >
        <Table :columns="columns1" :data="dataList" :loading="tableload" slot="table" highlight-row ref="currentRowTable"></Table>
        <Modal v-model="promptpic" title="添加相册" slot="others" :width="900">
            <component :is="'ClassPic'" v-if="promptpic" :infoId="infoId" @on-save="savefun"></component>
            <div slot="footer">
                <Button long  @click="promptpic=false">取消</Button>
            </div>
        </Modal>
        <orh-sidebar v-model="show" :title="pageTitle" cover slot="others">
            <component :is="'PhotoAlbum'" :infoId="infoId"></component>
        </orh-sidebar>
    </orh-table>
</template>

<script>
export default {
    components: {
        PhotoAlbum: resolve => {require(['./PhotoAlbum/PhotoAlbum.vue'], resolve);},
        ClassPic:resolve => {require(['./ClassPic.vue'], resolve);},	
    },
    name: 'basicmodule-myclass',
    data() {
        return {
            listUrl: 'api/eclass/v1/eclass/my_eclass',
            pageTitle: null, //右边页面的title
            tableload: true, //表格加载动画


            promptpic:false,
            
            show: false,
            infoId: null, //用于向修改页面传id值
            dataList: [], //班级变量
            columns1: [
                {
                    title: '班级名称',
                    render: (h, params) => {
                        return h('div', params.row.eclass_name.zh?params.row.eclass_name.zh:params.row.eclass_name.mn);
                    },
                    width: 100,
                    fixed: 'left'
                },
                {
                    title: '班主任',
                    width: 100,
                    render: (h, params) => {
                        if (params.row.teacher !== null) {
                            let name = params.row.teacher
                                .headteacher.teacher_name;
                            return h('div', name);
                        }
                    }
                },
                {
                    title: '届',
                    width: 100,
                    render: (h, params) => {
                        if (params.row.arrive != undefined) {
                            let name = params.row.arrive.name;
                            return h('div', name);
                        }
                    }
                },
                {
                    title: '班级类型',
                    width: 100,
                    render: (h, params) => {
                        if (params.row.class_kind !== null) {
                            let class_kind_dict = params.row.class_kind.dictionary_name;
                            return h('div', class_kind_dict);
                        }
                    }
                },
                {
                    title: '班级性质',
                    width: 100,
                    render: (h, params) => {
                        if (params.row.classnature !== null) {
                            let classnature = params.row
                                .classnature.dictionary_name;
                            return h('div', classnature);
                        }
                    }
                },
                {
                    title: '班级教室',
                    width: 180,
                    render: (h, params) => {
                        if (
                            params.row.buildings !== null &&
                            params.row.unit !== null &&
                            params.row.floor !== null &&
                            params.row.room !== null
                        ) {
                            let room =
                                params.row.buildings
                                    .buildings_name.zh +
                                '/' +
                                params.row.unit.unit_name.zh +
                                '/' +
                                params.row.floor.floor_name.zh +
                                '/' +
                                params.row.room.name.zh;
                            return h('div', room);
                        }
                    }
                },
                {
                    title: '是否毕业班',
                    key: 'graduated_flag_name',
                    width: 100,
                    render: (h, params) => {
                        let graduated_flag_name = null;
                        if (params.row.graduated_flag == 0) {
                            graduated_flag_name = '否';
                        } else if (
                            params.row.graduated_flag == 1
                        ) {
                            graduated_flag_name = '是';
                        }
                        return h('div', graduated_flag_name);
                    }
                },
                {
                    title: '班级人数',
                    key: 'eclass_people',
                    width: 100
                },
                {
                    title: ''
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'success',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.lookpic(params.row.eclass_id);
                                    }
                                }
                            },'查看相册'),
                            h("Button",{
                                props: {
                                    type: "info",
                                    size: "small"
                                },
                                style: {
                                    marginRight: "5px"
                                },
                                on: {
                                    click: () => {
                                        this.addpic(params.row.eclass_id);
                                    }
                                }
                            },"添加相册"),
                        ]);
                    }
                }
            ],
        };
    },
    methods: {


        /************************************************************
         * 
         * 获取班级的数据
         * 
         ************************************************************/
        queryData() {
            this.tableload = true;
            this.$http.get(this.listUrl)
            .then(val => {
                this.dataList = val.data;
                this.tableload = false;
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
                this.tableload = false;
            })
        },
        /************************************************************
         * 
         * 班级相册查看
         * 
         ************************************************************/
        lookpic(index) {
            this.infoId = index;
            this.show = true;
            this.pageTitle = '班级相册';
        },
        
        /************************************************************
         * 
         * 班级相册添加
         * 
         ************************************************************/
        addpic(index) {
            this.infoId = index;
            this.promptpic= true;
        },
        
        /************************************************************
         * 
         * 班级相册添加成功后返回
         * 
         ************************************************************/
        savefun(val){
            this.promptpic = val;
            this.queryData()
        },
     
        
    },
    mounted() {
        this.queryData()
    }
};
</script>